<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

<style type="text/css">
.fb_calendar_container { border: 1px solid #646464; padding: 4px; background-color: #ffffff; font-family: tahoma,verdana,helvetica; font-size: 11px; text-align: center; color: #000000; width: 180px; left: 0px; position: absolute; }
.fb_calendar_container table { font-family: tahoma,verdana,helvetica; font-size: 11px; text-align: center; }
.fb_calendar_header { height: 20px; width: 100%; }
.fb_calendar_body { margin: auto; overflow: hidden; height: 139px; position: relative; width: 170px; }
.fb_calendar_day_diff_month { padding: 0px 2px; cursor: pointer; height: 17px; text-align: right; width: 18px; color: #666666; }
.fb_calendar_day { padding: 0px 2px; cursor: pointer; height: 17px; text-align: right; width: 18px; }
.fb_calendar_day_hover { padding: 0px 2px; cursor: pointer; height: 17px; text-align: right; width: 18px; background-color: #dddddd; }
.fb_calendar_title { font-weight: bold; white-space: nowrap;}
.fb_calendar_lrgicons { font-size: 14px; }
</style>

<div id="divCalender" class="fb_calendar_container" style="left: 100px; top: 10px; display: none;">
    <div style="display: none;" id="BaseDate"></div>
    <div class="fb_calendar_header">

        <div class="fb_calendar_title"><span class="fb_calendar_lrgicons" style="cursor: pointer; margin-right: 8px;" id="prevYear"> - </span><span class="fb_calendar_lrgicons" style="cursor: pointer; margin-right: 8px;" id="prevMonth"> \ </span><span id="CanlendarTitle" style="margin-left: 6px; margin-right: 6px"></span><span class="fb_calendar_lrgicons" style="cursor: pointer; margin-left: 8px;" id="nextMonth">/</span><span class="fb_calendar_lrgicons" style="cursor: pointer; margin-left: 8px;" id="nextYear"> + </span></div>

    </div>
    <div class="fb_calendar_body">
        <table cellpadding="0" cellspacing="0" border="0" style="margin: auto; width: 100%; height: 100%;">
            <tr>
                <td><div>Su</div></td>
                <td><div>Mo</div></td>

                <td><div>Tu</div></td>
                <td><div>We</div></td>
                <td><div>Th</div></td>
                <td><div>Fr</div></td>
                <td><div>Sa</div></td>
            </tr>

            <tr>
                <td><div id="day_1" class="fb_calendar_day">27</div></td>
                <td><div id="day_2" class="fb_calendar_day">28</div></td>
                <td><div id="day_3" class="fb_calendar_day">29</div></td>
                <td><div id="day_4" class="fb_calendar_day">30</div></td>
                <td><div id="day_5" class="fb_calendar_day">1</div></td>

                <td><div id="day_6" class="fb_calendar_day">2</div></td>
                <td><div id="day_7" class="fb_calendar_day">3</div></td>
            </tr>
            <tr>
                <td><div id="day_8" class="fb_calendar_day">4</div></td>
                <td><div id="day_9" class="fb_calendar_day">5</div></td>
                <td><div id="day_10" class="fb_calendar_day">6</div></td>

                <td><div id="day_11" class="fb_calendar_day">7</div></td>
                <td><div id="day_12" class="fb_calendar_day">8</div></td>
                <td><div id="day_13" class="fb_calendar_day">9</div></td>
                <td><div id="day_14" class="fb_calendar_day">10</div></td>
            </tr>
            <tr>
                <td><div id="day_15" class="fb_calendar_day">11</div></td>

                <td><div id="day_16" class="fb_calendar_day">12</div></td>
                <td><div id="day_17" class="fb_calendar_day">13</div></td>
                <td><div id="day_18" class="fb_calendar_day">14</div></td>
                <td><div id="day_19" class="fb_calendar_day">15</div></td>
                <td><div id="day_20" class="fb_calendar_day">16</div></td>
                <td><div id="day_21" class="fb_calendar_day">17</div></td>

            </tr>
            <tr>
                <td><div id="day_22" class="fb_calendar_day">18</div></td>
                <td><div id="day_23" class="fb_calendar_day">19</div></td>
                <td><div id="day_24" class="fb_calendar_day">20</div></td>
                <td><div id="day_25" class="fb_calendar_day">21</div></td>
                <td><div id="day_26" class="fb_calendar_day">22</div></td>

                <td><div id="day_27" class="fb_calendar_day">23</div></td>
                <td><div id="day_28" class="fb_calendar_day">24</div></td>
            </tr>
            <tr>
                <td><div id="day_29" class="fb_calendar_day">25</div></td>
                <td><div id="day_30" class="fb_calendar_day">26</div></td>
                <td><div id="day_31" class="fb_calendar_day">27</div></td>

                <td><div id="day_32" class="fb_calendar_day">28</div></td>
                <td><div id="day_33" class="fb_calendar_day">29</div></td>
                <td><div id="day_34" class="fb_calendar_day">30</div></td>
                <td><div id="day_35" class="fb_calendar_day">31</div></td>
            </tr>
            <tr>
                <td><div id="day_36" class="fb_calendar_day">1</div></td>

                <td><div id="day_37" class="fb_calendar_day">2</div></td>
                <td><div id="day_38" class="fb_calendar_day">3</div></td>
                <td><div id="day_39" class="fb_calendar_day">4</div></td>
                <td><div id="day_40" class="fb_calendar_day">5</div></td>
                <td><div id="day_41" class="fb_calendar_day">6</div></td>
                <td><div id="day_42" class="fb_calendar_day">7</div></td>

            </tr>
            
        </table>
    </div>
    <div>
        <div style="text-align: center;" id="TodayTitle">Today: </div>
    </div>
</div>

<div style="height: 300px;">
<select name="dobDay" id="dobDay" class="dayselect" >
    <option value="1">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
    <option value="4">04</option>
    <option value="5">05</option>
    <option value="6">06</option>
    <option value="7">07</option>
    <option value="8">08</option>
    <option value="9">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>
<select name="dobMonth" id="dobMonth" class="monthselect">
    <option value="1">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
    <option value="4">04</option>
    <option value="5">05</option>
    <option value="6">06</option>
    <option value="7">07</option>
    <option value="8">08</option>
    <option value="9">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>
<select name="dobYear" id="dobYear" class="yearselect">
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
    <option value="1969">1969</option>
    <option value="1968">1968</option>
    <option value="1967">1967</option>
    <option value="1966">1966</option>
    <option value="1965">1965</option>
    <option value="1964">1964</option>
    <option value="1963">1963</option>
    <option value="1962">1962</option>
    <option value="1961">1961</option>
    <option value="1960">1960</option>    
</select>
<img src="http://202.134.127.67:8865/images/calendar1.gif" onclick="var Cal = startCal(true); Cal.show(this,'dob'); return true;" id="StartDate" style="cursor: pointer;" />
</span>
</div>


<script type="text/javascript">

    function startCal(init) {
    
        /* see if we have a calendar object already and if so return it */
        if(typeof startCal.Calendar != 'undefined') {
            return startCal.Calendar;
        }
        
    var Calendar = document.getElementById("divCalender");
        
    Calendar.initialize = function(){
    
        Calendar.mNames = [ "Jan", "Feb", "Mar", 
                            "Apr", "May", "Jun", "Jul", "Aug", "Sep", 
                                "Oct", "Nov", "Dec"];
                                
            Calendar.dNames = [ "Monday", "Tuesday", "Wednesday",
                                "Thursday", "Friday", "Saturday", "Sunday"];
            
        Calendar.title = document.getElementById("CanlendarTitle");
        Calendar.todaytitle = document.getElementById("TodayTitle");
        
        Calendar.currentDate = new Date();
        Calendar.todaytitle.setTextValue('Today: ' + Calendar.dNames[Calendar.currentDate.getDay()] + ' ' + Calendar.currentDate.getDate() + ' ' + Calendar.mNames[Calendar.currentDate.getMonth()] + ' ' + Calendar.currentDate.getFullYear());
        
        Calendar.visible = false;
        Calendar.x = 0;
            Calendar.y = 0;

        document.getRootElement().addEventListener('mouseover',Calendar.isOutOfRange);
    
        for(var i=1;i<43;i++){
            document.getElementById('day_'+i).addEventListener('click',Calendar.dateSelected);
            document.getElementById('day_'+i).addEventListener('mouseover',Calendar.onMouseOver);
            document.getElementById('day_'+i).addEventListener('mouseout',Calendar.onMouseOut);
        }

                document.getElementById('prevMonth').addEventListener('click',Calendar.datePrevMonth);
                document.getElementById('prevYear').addEventListener('click',Calendar.datePrevYear);
                document.getElementById('nextMonth').addEventListener('click',Calendar.dateNextMonth);
                document.getElementById('nextYear').addEventListener('click',Calendar.dateNextYear);
    }
    
    Calendar.datePrevMonth = function(){
        var prevDate = new Date(Calendar.currentDate.getFullYear(),Calendar.currentDate.getMonth(),Calendar.currentDate.getDate());
        prevDate.setMonth( prevDate.getMonth() - 1);
        Calendar.setDate(prevDate);
    }

    Calendar.datePrevYear = function(){
        var prevDate = new Date(Calendar.currentDate.getFullYear(),Calendar.currentDate.getMonth(),Calendar.currentDate.getDate());
        prevDate.setFullYear( prevDate.getFullYear() - 1);
        Calendar.setDate(prevDate);    
    }
    
    Calendar.dateNextMonth = function(){
        var nextDate = new Date(Calendar.currentDate.getFullYear(),Calendar.currentDate.getMonth(),Calendar.currentDate.getDate());
        nextDate.setMonth( nextDate.getMonth() + 1);
        Calendar.setDate(nextDate);    
    }
    
    Calendar.dateNextYear = function(){
         var nextDate = new Date(Calendar.currentDate.getFullYear(),Calendar.currentDate.getMonth(),Calendar.currentDate.getDate());
        nextDate.setFullYear( nextDate.getFullYear() + 1);
        Calendar.setDate(nextDate);    
    }
    
    Calendar.isOutOfRange = function(evt){
        if(Calendar.visible == false) return true;
        var root = document.getRootElement();
        
        
        
        var cursorX = evt.pageX - root.getAbsoluteLeft();
        var cursorY = evt.pageY - root.getAbsoluteTop();
        
        var basePointX = Calendar.target.getAbsoluteLeft() - root.getAbsoluteLeft();
        var basePointY = Calendar.target.getAbsoluteTop() - root.getAbsoluteTop();
        
        var secondPointX = basePointX + Calendar.target.getClientWidth() + Calendar.getClientWidth() + 50;
        var secondPointY = basePointY + Calendar.target.getClientHeight() + Calendar.getClientHeight() + 50;        
        
        if((cursorX > basePointX && cursorX < secondPointX) && (cursorY > basePointY && cursorY < secondPointY)){
            return false;
        }
        
        Calendar.hide();
        return true;
    }
    
    Calendar.show = function(trgt,idref){
    
        Calendar.target = trgt;
        Calendar.preid = idref;
        
        var root = document.getRootElement();
        
        if(trgt){
            Calendar.x = trgt.getAbsoluteLeft() - root.getAbsoluteLeft() + trgt.getClientWidth();
            Calendar.y = trgt.getAbsoluteTop() - root.getAbsoluteTop() + trgt.getClientHeight();
            Calendar.setStyle('top',(trgt.getAbsoluteTop() - root.getAbsoluteTop() + trgt.getClientHeight())+"px");
            Calendar.setStyle('left',(trgt.getAbsoluteLeft() - root.getAbsoluteLeft() + trgt.getClientWidth())+"px");
        }
        
        Calendar.setDate(new Date(parseInt(document.getElementById(Calendar.preid + 'Year').getValue()), parseInt(document.getElementById(Calendar.preid + 'Month').getValue()) - 1, parseInt(document.getElementById(Calendar.preid + 'Day').getValue())));
        
        Calendar.setStyle("display","");
        Calendar.visible = true;
    }
    
    Calendar.hide = function(){
        Calendar.target = null;
        Calendar.setStyle("display","none");
        Calendar.visible = false;
    }
    
    Calendar.dateSelected = function(evt){
        if(Calendar.target){
            var value = evt.target.getValue();            
            
            if(Calendar.OnDateSelected){
                Calendar.OnDateSelected(Calendar.target,value);
            }
            
        }
        Calendar.hide();
    }
    Calendar.onMouseOver = function(evt){
        evt.target.setClassName('fb_calendar_day_hover');
    }
    Calendar.onMouseOut = function(evt){
        evt.target.setClassName(evt.target.className);
    }
    
    Calendar.setDate = function (someDate){
    
        var baseDate = new Date(someDate.getFullYear(),someDate.getMonth(),1);
        var date_index = baseDate.getDay();                
        
        baseDate.setDate( - date_index + 1);
        Calendar.currentDate = new Date(someDate.getFullYear(),someDate.getMonth(),someDate.getDate());

        Calendar.title.setTextValue(Calendar.mNames[Calendar.currentDate.getMonth()] + " - " + Calendar.currentDate.getFullYear());
        
        
        var divDay;
        var i = 1;
        for(i;i<43;i++){
            divDay = document.getElementById("day_"+i);            
            if(divDay){
                divDay.setTextValue(baseDate.getDate());
                divDay.setValue(new Date(baseDate.getFullYear(),baseDate.getMonth(),baseDate.getDate()));

                if(baseDate.getMonth() == someDate.getMonth()){
                    divDay.className = "fb_calendar_day";
                }else{
                    divDay.className = "fb_calendar_day_diff_month";                    
                }
                divDay.setClassName(divDay.className);
            }
            baseDate.setDate(baseDate.getDate() + 1);
        }
        
        
    }
        
    Calendar.OnDateSelected = function(sender,date){    
    
        var argCount = document.getElementById(Calendar.preid + 'Year').getChildNodes().length;
        var sortedOptions = document.getElementById(Calendar.preid + 'Year').getChildNodes();
        sortedOptions = sortedOptions.sort();
        var debugStr = '';
        
        var addOption = true;

        /* check current available options in select list */        
        for(a=0;a<argCount;a++) {
            if(sortedOptions[a].getValue() == date.getFullYear()) {
                addOption = false;
                a = argCount;
            }
            // debugStr = debugStr + ',' + sortedOptions[a].getValue() + ' == ' + date.getFullYear();
        }
        
        //var dlg = new Dialog();            
                //dlg.showMessage('Debug OnDateSelected()', 'Debug: ' + debugStr + ' answer: ' + addOption);

        /* if we need to add the option to the select list */                
                if(addOption == true) {
                
                    var yearSelect = document.getElementById(Calendar.preid + 'Year').getChildNodes().sort();
        
                    var opt = document.createElement('option');
                    opt.setId('yr'+date.getFullYear());
                opt.setTextValue(date.getFullYear());
            opt.setValue(date.getFullYear());
                  
                    /* if the lowest yr option value is greater than selected year */                    
                    if(yearSelect[0].getValue() > date.getFullYear() && yearSelect[1].getValue() > yearSelect[0].getValue()) {
                    
                          /* we insertBefore() the missing option so it's at the top of list */      
                          document.getElementById(Calendar.preid + 'Year').insertBefore(opt,document.getElementById(Calendar.preid + 'Year').getChildNodes()[0]);
                          
            } else if(yearSelect[0].getValue() < date.getFullYear() && yearSelect[1].getValue() > yearSelect[0].getValue()) {
            
                  /* otherwise we append the missing yr option to the end of the list */                          
                          document.getElementById(Calendar.preid + 'Year').appendChild(opt);
                          
            } else if(yearSelect[0].getValue() > date.getFullYear() && yearSelect[1].getValue() < yearSelect[0].getValue()) {
            
                  /* otherwise we append the missing yr option to the end of the list */                          
                          document.getElementById(Calendar.preid + 'Year').appendChild(opt);            
                          
            } else {
            
                          /* we insertBefore() the missing option so it's at the top of list */      
                          document.getElementById(Calendar.preid + 'Year').insertBefore(opt,document.getElementById(Calendar.preid + 'Year').getChildNodes()[0]);
            
            }

                }
                
                /* set the list options to the chosen date */
                document.getElementById(Calendar.preid + 'Year').setValue("" + date.getFullYear());
                document.getElementById(Calendar.preid + 'Day').setValue("" + date.getDate());
                document.getElementById(Calendar.preid + 'Month').setValue("" + (date.getMonth() + 1));

        /*
        var dlg = new Dialog();            
                dlg.showMessage('Message',sender.getId() + " is selected : " + date.getFullYear() + ' / ' + (date.getMonth() + 1) + ' / ' + date.getDate());
                */
                            
    }
    
    
    if(init == true) {
        /* run initialize function */
        Calendar.initialize();
    }
    
    startCal.Calendar = Calendar;
    
    /* return calendar object */
    return startCal.Calendar;
    }    


</script>